<template>
	<view>
		<s-layout title="附近门店" navbar="custom1" :bgStyle="state.bgStyle" onShareAppMessage>
			<assNavbar title="附近门店"  :messageTitleShow="false">
				<template #center>
					<view class="w-100 search ss-flex ss-row-center ss-p-r-50 ss-p-r-16">
					  <view class="w-100 ss-flex-1 right ss-flex  ss-row-between ss-r-50 ss-m-r-10">
						  <view class="search-view ss-flex ss-row-left">
							  <uni-icons class="search-icon" type="search" color="#E4E4E4" size="20"></uni-icons>
							  <input  class="my-input" :inputBorder="false"   v-model="search"  placeholder="搜索"/>
						  </view>
						  <view class="search_btn" @click="onSearch">搜索</view>
					  </view>
					</view>
				</template>
			</assNavbar>
			
			<c-search activeColor="#F46800" @change="searchChange"/>
			<!-- 门店分类 -->
			<view class="w-100 bg_color tabs ss-m-y-20" >
				<scroll-view class="scroll-view_H" scroll-x="true" :scroll-into-view="activeId">
					<template v-for="(item,index) in childrend" :key="index">
						<view :id="'categorys_' + index" class="scroll-view-item_H type" :class="{ssactive:index==child_index}" @click="onCategorysTabsChange(item,index)">{{item.name}}</view>
					</template>
				</scroll-view>
			</view>
			
		
			<!-- 门店列表 -->

			<view class="ss-m-t-10" v-if="state.list && state.list.length>0">
				<template v-for="(item,index) in state.list" :key="index">
					<s-group-buy-list-custom :data="item" @item-click="itemClick(item)"></s-group-buy-list-custom>
				</template>
			</view>
			<s-empty v-else
				:icon="sheep.$url.cdn('/mengchong/data-empty.png')" text="敬请等待商家入驻">
			</s-empty>
			<!-- 地址选择弹窗 -->
			<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />
		</s-layout>
	</view>
</template>

<script setup>
//附近门店列表页
import {
		computed,
		reactive,
		onBeforeMount,
		ref
	} from 'vue';
import {
	onLoad,
	onReachBottom,
	onPageScroll
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import merchantApi from '@/sheep/api/merchant'
import _ from 'lodash'

import assNavbar from '@/components/ass-navbar.vue'
import cSearch from './components/c-search/c-search.vue'

import sGroupBuyListCustom from '@/sheep/components/s-group-buy-list-custom/s-group-buy-list-custom.vue'

const search = ref('')

const indexTop = ref(0);

const child_index = ref(0);
const activeId = ref('');

const categorys = ref([])

// const latitude = computed(()=>{
	// 	return sheep.$store('location').myPosition.latitude
	// });
	
// const longitude = computed(()=>{
// 	return sheep.$store('location').myPosition.longitude
// });

const latitude = ref(30.23555800000002)
const longitude = ref(120.25218299999995)
	
const state = reactive({
	loadStatus: 'more',
	// 页数
	page: 0,
	list: [],
	search:{},
	activeId:'',
	showRegion:false,
	address:'',
	district_name:'滨江区',
	bgStyle:{
		color:"#FFFFFF",
		src:"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/index/202503041521485179.png"
	}
})
onPageScroll((e)=>{
})



const childrend = computed(()=>{
	return categorys.value
})

const onCategorysTabsChange =(item,index)=>{
	child_index.value = index;
	state.page=0;
	state.list=[];
	search.value = ''
	state.loadStatus = 'more'
	getList();	
}
function searchChange(e){
	state.search = e
	// console.log('searchChange',e)
	onSearch()
}
const onRegionConfirm = (e) => {
	state.address = e
	state.district_name = e.district_name
	state.showRegion = false;
};

const regionClick =()=>{
	state.showRegion = true;
}

const itemClick=(e)=>{
	var index = _.findIndex(state.list,{id:e.id});
	var item = state.list[index];
	return sheep.$router.go('/pages/merchant/info', { id: item.id,name:'宠物店' });
}


async function getCategory() {
	
	const {data,error} = await merchantApi.getCategoryList();
	
	if(error==0){
		categorys.value = data
		categorys.value.unshift({id:"",name:"推荐"})
	}
}


const onSearch=()=>{
	state.page=0;
	state.loadStatus = 'more'
	getList();
}


onReachBottom(()=>{
	 getList();
})



async function getList() {
	
  if (state.loadStatus == 'no-more') return
  
  state.loadStatus = 'loading'
  
  var filter = { 
	  page: state.page + 1,
	  service_category_id:categorys.value[child_index.value].id|| 'all',
	  tag:categorys.value[child_index.value].name,
	  keyword:search.value,
	  lng:longitude.value,
	  type:2,
	  lat:latitude.value,
	  list_rows:10,
	  ...state.search
	}
  
  
  const { data } = await merchantApi.merchantList(filter)
  

  if (!data||!data.data) {
    state.loadStatus = 'no-more'
    return
  }
 
  state.page = data.current_page;
  
  data.data.forEach(function (value,index) {
	  value.score = Math.floor(value.score);
	  value.num = 5-Math.floor(value.score);
	  data.data[index] = value;
	});
  
	let list = data.data;
  
  if (state.page <= 1) {
    state.list = list
  } else {
    state.list.push(...list)
  }
  
  state.loadStatus = (list.length >= 10 && data.total != state.list.length) ? 'more' : 'no-more'
}



onLoad(async(opt)=>{
	await getCategory();
	if(opt?.search){
		let f = categorys.value.findIndex((v)=>v.name.includes(opt.search))
		if(f != -1){
			child_index.value = f
			activeId.value ='categorys_'+f
			state.activeId =categorys.value[f].id
		}
		search.value = opt.search
	}

	await getList();
	
})

</script>


<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.uni-input-placeholder {
		font-size: 28rpx;
		color:#E4E4E4;
	}
.bg_white{
	background-color:#FFFFFF;
}	
	
.bg_color{
	background-color: rgba(255, 255, 255, 0);
}

.search{
	/* #ifdef MP||H5 */
	height:65rpx;
	/* #endif */
	
	/* #ifdef APP */
	height:35rpx;
	/* #endif */
	
		
	.left{
		
		height:100%;
		.region{
			font-family: PingFang SC;
			font-size: 30rpx;
			font-weight: normal;
			line-height: 30rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content:center;
			letter-spacing: 0.64rpx;
			width: 98rpx;
			
			
			white-space: nowrap;     
			overflow: hidden;         
			text-overflow: ellipsis;
			
			font-variation-settings: "opsz" auto;
			color: #3D3D3D;
			
		}
		.img{
			width:25rpx;
			height:18rpx;
		}
	}
	.right{
		width:calc(100% - 30rpx - 98rpx - 20rpx - 20rpx - 20rpx);
		background-color:#fff;
		margin-right: 20rpx;
		margin-left: 20rpx;
		height:100%;
		border: 2rpx solid #fff;
		.search-view{
			/* #ifdef MP */
			width:320rpx;
			/* #endif */
			/* #ifndef MP */
			width:350rpx;
			/* #endif */
			height:100%;
			
			.my-input{
				color:#333;
				/* #ifdef MP||H5 */
				height:50rpx;
				/* #endif */
				/* #ifdef APP */
				height:30rpx;
				/* #endif */
				width:300rpx;
				max-height: 50rpx;
				margin-left:20rpx;
				
			}
			.search-icon{
				margin-left: 20rpx;
			}
			
		}
		.search_btn{
			background-color:#F46800;
			color:#fff;
			/* #ifdef MP||H5 */
			width:134rpx;
			/* #endif */
			/* #ifdef APP */
			width:94rpx;
			/* #endif */
			height:100%;
			display:flex;
			justify-content:center;
			align-items:center;
			border-radius:40rpx;
			font-size: 30rpx;
		}
		
	}
	
}






.tabs{
	
}
.blank{
	height:20rpx;
	width:100%;
}
::v-deep .tabs .u-tabs{
	border-bottom:none;
	background-color: rgba(255, 255, 255, 0);
}






.category{
	width:100%;
	height:80rpx;
	font-family: PingFang SC;
	.itmes{
		width:200rpx;
		height:100%;
		font-size: 30rpx;
		font-weight: 400;
		line-height: normal;
		letter-spacing: 1rpx;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	
	
	
}

.active{
		color:#F46800;;
		border: 4rpx solid ;
		border-image: radial-gradient(45% 45% at 51% 100%, #F46800 0%, rgba(71, 223, 189, 0) 100%) 4;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}
.scroll-view-item_H {
		display: inline-block;
		background-color:#FFFFFF;
		min-width:70rpx;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 36rpx;
}
.type{
	font-family: PingFang SC;
	font-size:24rpx;
	font-weight:normal;
	color:#4F4F4F;
	border-radius:10rpx;
	margin-right:5rpx;
	margin-left:5rpx;
	// padding-left:10rpx;
	// padding-right:10rpx;
	letter-spacing:1rpx;
	
	
}

.ssactive{
	color:#F46800;
	background: #FFF8F3;
	border:solid 1rpx #F46800;
}



</style>
